<template>
  <div class="">
    <div class="flex items-center justify-between mb-2">
      <div v-if="title" class="font-bold">
        {{ title }}
      </div>
      <slot v-else name="title" />
    </div>
    <div class="w-full relative">
      <!-- 根据type动态绑定不同的数据 -->
      <div v-if="type == 1">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="requestData.value || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ requestData.percentage || 0 }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div v-if="type == 2">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="orderData.value || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ orderData.percentage || 0 }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div v-if="type == 3">
        <div class="mt-4 text-gray-600 text-3xl font-mono">
          <el-statistic :value="userData.value || 0" />
        </div>
        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
          +{{ userData.percentage || 0 }}% <el-icon><TopRight /></el-icon>
        </div>
      </div>
      <div class="absolute top-0 right-2 w-[50%] h-20">
        <charts-people-number
          v-if="type === 1 && requestData"
          :data="requestData.data"
          height="100%"
        />
        <charts-people-number
          v-if="type === 2 && orderData"
          :data="orderData.data"
          height="100%"
        />
        <charts-people-number
          v-if="type === 3 && userData"
          :data="userData.data"
          height="100%"
        />
      </div>
      <!-- 将 xAxis 和 chartsData 传递给子组件 -->
      <charts-content-number
        v-if="type === 4"
        :x-axis="xAxis"
        :charts-data="chartsData"
        height="14rem"
      />
    </div>
  </div>
</template>

<script setup>
import chartsPeopleNumber from "./charts-people-numbers.vue";
import chartsContentNumber from "./charts-content-numbers.vue";

// 定义 props 接收从父组件传递的 `requestData`, `orderData`, `userData`
const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
  title: {
    type: String,
    default: "",
  },
  requestData: {
    type: Object,
    default: () => ({}),
  },
  orderData: {
    type: Object,
    default: () => ({}),
  },
  userData: {
    type: Object,
    default: () => ({}),
  },
  xAxis: {
    type: Array,
    default: () => [],
  },
  chartsData: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
</style>
